<template>
  <div class="seller-container">
    <div class="seller-info">
      <div class="seller-content border-1px">
        <div class="seller">
          <div class="name">{{seller.name}}</div>
          <div class="graded">
            <star :score="seller.score" :size="36"></star><span class="rating-count">({{seller.ratingCount}})</span><span class="order-num">月售{{seller.sellCount}}单</span>
          </div>
        </div>
        <div class="collect">
          <i class="icon-favorite"></i>
          <div class="status">已收藏</div>
        </div>
      </div>
      <div class="delivery-info">
        <div class="start-send">
          <div class="title">起送价</div>
          <div class="price">{{seller.minPrice}}<span class="unit">元</span></div>
        </div>
        <div class="start-send">
          <div class="title">商家配送</div>
          <div class="price">{{seller.deliveryPrice}}<span class="unit">元</span></div>
        </div>
        <div class="start-send">
          <div class="title">平均配送时间</div>
          <div class="price">{{seller.deliveryTime}}<span class="unit">分钟</span></div>
        </div>
      </div>
    </div>
    <split></split>
    <div class="notice">
      <h1 class="title">公告与活动</h1>
      <div class="notice-content border-1px">{{seller.bulletin}}</div>
    </div>
    <ul class="activity-list">
      <li class="activity-item" v-for="(support, index) in seller.supports" :key="index">
        <span class="icon" v-show="support.type !== -1" :class="classMap[support.type]"></span><span class="menu-name">{{support.description}}</span>
      </li>
    </ul>
    <split></split>
    <div class="real-scene">
      <h1 class="title">商家实景</h1>
      <div class="scene-wrapper" ref="sceneWrapper">
        <ul class="scene-list" ref="sceneList">
          <li class="scene-item" v-for="pic in seller.pics" :key="pic">
            <img :src="pic" width="120" height="90">
          </li>
        </ul>
      </div>
    </div>
    <split></split>
    <div class="information">
      <h1 class="title">商家信息</h1>
      <ul class="demand-list">
        <li class="demand-item" v-for="(info, index) in seller.infos" :key="index">
          <span class="content">{{info}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import star from 'components/star/star.vue'
import split from 'components/split/split.vue'
import BScroll from 'better-scroll'

export default {
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
    }
  },
  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  watch: {
    'seller'(val) {
      this.$nextTick(() => {
        this._initPic()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._initPic()
    })
  },
  methods: {
    _initPic() {
      if (this.seller.pics) {
        let picWidth = 120
        let margin = 6
        let width = (picWidth + margin) * this.seller.pics.length - margin
        this.$refs.sceneList.style.width = width + 'px'
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.sceneWrapper, {
              scrollX: true,
              eventPassthrough: 'vertical'
            })
          } else {
            this.scroll.refresh()
          }
        })
      }
    }
  },
  components: {
    star,
    split
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scroed>
@import '../../common/stylus/mixin.styl'
  .seller-container
    .seller-info
      padding: 18px
      .seller-content
        display: flex
        padding-bottom: 18px
        border-bottom: 1px solid rgba(7,17, 27, 0.1)
        .seller
          flex: 1
          .name
            font-weight: 700
            font-size: 14px
            color: rgb(7, 17, 27)
            line-height: 14px
            margin-bottom: 8px
          .graded
            display: flex
            align-items: center
            color: rgb(77, 85, 93)
            font-size: 10px
            line-height: 18px
            .rating-count
              margin: 0 12px 0 8px
        .collect
          width: 50px
          margin-right: -10px
          text-align: center
          .icon-favorite
            font-size: 24px
            color: rgb(240, 20, 20)
            line-height: 24px
          .status
            margin-top: 4px
            font-size: 10px
            color: rgb(77, 85, 93)
      .delivery-info
        display: flex
        padding-top: 18px
        .start-send
          flex: 1
          text-align: center
          border-right: 1px solid rgba(7, 17, 27, 0.1)
          &:last-child
            border: none
          .title
            font-size: 10px
            color: rgb(147, 153, 159)
            line-height: 10px
            margin-bottom: 4px
          .price
            font-szie: 24px
            font-weight: 200
            color: rgb(7, 17, 27)
            line-height: 24px
            .unit
              font-size: 10px
    .notice
      padding: 18px 18px 0 18px
      .title
        font-size: 14px
        color: rgb(7, 17, 27)
        line-height: 14px
        margin-bottom: 8px
        font-weight: 700
      .notice-content
        padding: 0 12px 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        font-size: 12px
        font-weight: 200
        color: rgb(240, 20, 20)
        line-height: 24px
    .activity-list
      padding: 0 18px
      .activity-item
        display: flex
        align-items: center
        padding: 16px 6px 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        &:last-child
          border: none
        .menu-name
          font-size: 12px
          font-weight: 200
          color: rgb(7, 17,27)
          line-height: 16px
        .icon
          display: inline-block
          margin-right: 6px
          &.decrease
              base_image('decrease_4', 16px, 16px)
          &.discount
              base_image('discount_4', 16px, 16px)
          &.guarantee
              base_image('guarantee_4', 16px, 16px)
          &.invoice
              base_image('invoice_4', 16px, 16px)
          &.special
              base_image('special_4', 16px, 16px)
    .real-scene
      padding: 18px
      .title
        font-size: 14px
        color: rgb(7, 17, 27)
        font-weight: 700
        line-height: 14px
        margin-bottom: 12px
      .scene-wrapper
        width: 100%
        overflow: hidden
        white-space: nowrap
        .scene-list
          .scene-item
            display: inline-block
            width: 120px
            height: 90px
            margin-right: 6px
            &:last-child
              margin: 0
    .information
      padding: 18px 18px 0
      .title
        font-size: 14px
        color: rgb(7, 17, 27)
        font-weight: 700
        line-height: 14px
        padding-bottom: 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      .demand-item
        font-size: 12px
        font-weight: 200
        color: rgb(7, 17, 27)
        padding: 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        &:last-child
          border: none
</style>
